<template>
  <div>首页</div>
</template>
<script>
export default {
  created() {
    const arr = [
      {
        id: 1,
        name: '深圳',
        pid: ''
      },
      {
        id: 2,
        name: '广州',
        pid: ''
      },
      {
        id: 3,
        name: '宝安区',
        pid: 1
      },
      {
        id: 4,
        name: '石岩',
        pid: 3
      }
    ]
    console.log(this.changeData(arr, ''))
    // 只想找深圳的子集
    console.log(this.changeData(arr, 1))
    console.log(this.changeData(arr, 3))

    // const result = [
    //   {
    //     id: 1,
    //     name: '深圳',
    //     pid: '',
    //     children: [
    //       {
    //         id: 3,
    //         name: '宝安区',
    //         pid: 1,
    //         children: [
    //           {
    //             id: 4,
    //             name: '石岩',
    //             pid: 3
    //           }
    //         ]
    //       }
    //     ]
    //   },
    //   {
    //     id: 2,
    //     name: '广州',
    //     pid: ''
    //   }
    // ]
  },
  methods: {
    // 树形数据转换
    changeData(arr, pid) {
      // 1：找出数据的第一层
      // 2:将pid的值变成形参
      // 3：给找出来的数据每一项加一个children
      // 4:使用递归调用找出自己的子集（子集的pid是自己的id）
      return arr.filter((item) => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style></style>
